<template>
  <view class="personal-center">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="name-phone">
        <text class="name">张毅</text>
        <text class="phone">18893209839</text>
      </view>
    </view>

    <!-- 优惠券区域 -->
    <view class="coupon-section">
      <text>优惠券</text>
      <view class="right-content">
        <text class="count">3张</text>
      </view>
    </view>

    <!-- 我的订单区域 -->
    <view class="order-section">
      <view class="section-header">
        <text class="title">我的订单</text>
        <view class="right-content" @click="navigateToAllOrders">
          <text class="more">全部订单</text>
          <text>></text>
        </view>
      </view>
      
      <view class="order-status">
        <view class="status-item" @click="navigateToOrderList('waitPay')">
          <image src="/static/order/待支付.png" mode="aspectFit"></image>
          <text>待支付</text>
        </view>
        <view class="status-item" @click="navigateToOrderList('waitUse')">
          <image src="/static/order/待使用.png" mode="aspectFit"></image>
          <text>待使用</text>
        </view>
        <view class="status-item" @click="navigateToOrderList('waitComment')">
          <image src="/static/order/待评价.png" mode="aspectFit"></image>
          <text>待评价</text>
        </view>
      </view>
    </view>

    <!-- 我的服务区域 -->
    <view class="service-section">
      <text class="section-title">我的服务</text>
      
      <view class="service-grid">
        <view class="service-item" v-for="(item, index) in services" :key="index" @click="handleServiceClick(item)">
          <image :src="item.icon" mode="aspectFit"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="handleLogout">
      <text>退出登录</text>
    </view>


  </view>
</template>

<script setup>
import { ref } from 'vue'

// 服务列表数据
const services = ref([
  { 
    name: '领券中心', 
    icon: '/static/order/领券中心.png',
    path: '/pages/coupon-center/index'
  },
  { 
    name: '邀请好友', 
    icon: '/static/order/邀请好友.png',
    path: '/pages/invite-friend/index'
  },
  { 
    name: '我的车辆', 
    icon: '/static/order/我的车辆.png',
    path: '/pages/my-vehicle/index'
  },
  { 
    name: '消费记录', 
    icon: '/static/order/消费记录.png',
    path: '/pages/consumption-record/index'
  },
  { 
    name: '我的维修', 
    icon: '/static/order/我的维修.png',
    path: '/pages/my-repair/index'
  },
  { 
    name: '意见反馈', 
    icon: '/static/order/意见反馈.png',
    path: '/pages/feedback/index'
  },
  { 
    name: '收货地址', 
    icon: '/static/order/收货地址.png',
    path: '/pages/address-list/index'
  }
])

// 处理服务点击跳转
const handleServiceClick = (item) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  }
}

// 跳转到全部订单
const navigateToAllOrders = () => {
  uni.navigateTo({
    url: '/pages/order/index?type=all'
  })
}

// 跳转到特定类型的订单列表
const navigateToOrderList = (type) => {
  uni.navigateTo({
    url: `/pages/order/index?type=${type}`
  })
}

// 跳转到首页
const navigateToHome = () => {
  uni.switchTab({
    url: '/pages/home/index'
  })
}

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除用户信息逻辑
        // userStore.clearUserInfo()
        
        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }
    }
  })
}
</script>

<style lang="scss">
.personal-center {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.user-info {
  padding: 30rpx;
  background-color: #2196f3;
  color: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  
  .name-phone {
    .name {
      font-size: 36rpx;
      font-weight: bold;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .phone {
      font-size: 28rpx;
      opacity: 0.9;
    }
  }
}

.coupon-section, .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  
  .right-content {
    display: flex;
    align-items: center;
    
    .count {
      color: #999;
      margin-right: 10rpx;
    }
  }
}

.order-section {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  
  .section-header {
    padding-bottom: 20rpx;
    margin-bottom: 0;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .more {
      color: #999;
      font-size: 28rpx;
    }
  }
  
  .order-status {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
    
    .status-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 15rpx;
      }
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.service-section {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    display: block;
  }
  
  .service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30rpx;
    
    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 15rpx;
      }
      
      text {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  text-align: center;
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #eee;
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    
    &.active {
      color: #2196f3;
      font-weight: bold;
    }
  }
}
</style>